<template>
  <div id="waitList">
    <div class="waitList-main">
      <div class="title">
        <HomeTitle title="授权列表" Eng="Wait Lists"></HomeTitle>
      </div>
      <div class="content">
        <div style="display: flex;align-items: center;">
          <el-select v-model="wait.type" style="margin-right: 10px;;" @change="init">
            <el-option label="待授权" :value="9"></el-option>
            <el-option label="已授权" :value="6"></el-option>
          </el-select>
          <el-button :disabled="wait.select.length == 0" type="primary" @click="pass">
            授权通过
          </el-button>
          <el-button :disabled="wait.select.length == 0" type="danger" @click="unpass">
            授权不通过
          </el-button>
        </div>
        <myLoading v-if="loading"></myLoading>
        <el-table v-else :data="wait.list" @selection-change="selectChange" header-cell-class-name="tableColor"
          cell-class-name="tableColor">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" :index="calcIndex" label="序号" width="80"></el-table-column>
          <el-table-column label="申请人" prop="AskUserName" width="100">
          </el-table-column>
          <el-table-column label="申请理由" prop="ApplyReason" width="200">
          </el-table-column>
          <el-table-column label="申请时间" width="180">
            <template #default="s">
              {{ moment(s.row.ApplyDatetime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="申请授权图片">
            <template #default="s">
              <div style="
                  display: flex;
                  align-items: center;
                  width: 150px;
                  height: 150px;
                ">
                <el-image style="width: 150px; height: 150px" preview-teleported v-for="(v, k) in s.row.ApplyPictureList"
                  :key="k" :src="baseApi + v.WatermarkFileUrl" :preview-src-list="[baseApi + v.WatermarkFileUrl]" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <el-pagination v-model:currentPage="params.PageIndex" :page-size="params.PageSize" :small="true"
          :background="true" layout="prev, pager, next" :total="wait.count" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as WaitApi from "@/api/wait";
import { storeUser } from "@/store/user";
import HomeTitle from "@/components/title.vue";
import moment from "moment";
import { ElNotification } from "element-plus";
// import
export default {
  name: "",
  components: {
    HomeTitle,
  },
  setup(props, ctx) {
    const loading = ref(false);
    const user = storeUser();
    const wait = reactive({
      list: [],
      count: 0,
      select: [],
      type: 9
    });
    const params = reactive({
      CurrentAccount: user.UserAccount,
      Allowed: 0,
      PageSize: "5",
      PageIndex: 1,
    });
    const init = async () => {
      params.Allowed = wait.type
      loading.value = true;
      let { data } = await WaitApi.getList(params);
      loading.value = false;
      wait.list = data.UserData.list;
      wait.count = data.UserData.Count;
    };
    onMounted(() => {
      init();
    });
    const calcIndex = (index) => {
      return (params.PageIndex - 1) * params.PageSize + index + 1;
    };
    const handleCurrentChange = (v) => {
      wait.select = [];
      params.PageIndex = v;
      init();
    };
    const selectChange = (e) => {
      wait.select = e;
    };
    const pass = async () => {
      let { data } = await WaitApi.checkApply({
        CurrentUserAccount: user.UserAccount,
        ApplyIDs: wait.select.map((s) => s.ApplyID).join(","),
        Allowed: 1,
      });
      if (data.Status != 0) return;
      ElNotification({
        type: "success",
        message: "授权成功",
        title: "授权",
      });
      init();
    };
    const unpass = async () => {
      let { data } = await WaitApi.checkApply({
        CurrentUserAccount: user.UserAccount,
        ApplyIDs: wait.select.map((s) => s.ApplyID).join(","),
        Allowed: 2,
      });
      if (data.Status != 0) return;
      ElNotification({
        type: "error",
        message: "授权不通过",
        title: "授权",
      });
      init();
    };

    return {
      calcIndex,
      handleCurrentChange,
      wait,
      loading,
      init,
      moment,
      params,
      selectChange,
      pass,
      unpass,
    };
  },
};
</script>

<style scoped lang="scss">
::v-deep(.el-table) {
  background: transparent !important;
  color: #fff !important;
}

::v-deep(.el-table tr) {
  background: transparent !important;
  color: #fff !important;
}

::v-deep(.el-table__cell) {
  background: transparent !important;
  color: #fff !important;
}

#waitList {
  position: relative;
  width: 100%;
  height: 100%;
  border-top-left-radius: 30px;
  overflow-y: auto;
  background: var(--box-bg-color);

  .waitList-main {
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .title {
      margin-bottom: 20px;
    }

    .content {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .el-table {
        flex: 1;
      }
    }

    .footer {
      margin-top: 20px;
      // text-align: right;
      align-self: flex-end;
    }
  }
}
</style>
